<template>
        <div>
            <el-row>
                <!--视频list-->
                <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="2" v-for="video in videoList" :key="video.id">
                    <div class="video-item">
                        <div class="img-cont">
                            <router-link :to="'/index/'+video.vid+'/video'"><img :src="video.img" class="image"></router-link>
                        </div>
                        <div class="title">{{video.name}}
                        </div>
                        <div class="info">{{video.info}}
                        </div>
                        <div class="icon">
                            <div class="i" @click="like(video)"><i
                                    :class="video.liked==0?'iconfont icon-xihuan2':'iconfont icon-xihuan1'" class=" ii"></i>{{
                                video.likes}}
                            </div>
                            <div class="i" @click="zan(video)"><i
                                    :class="video.zand==0?'iconfont icon-zan2':'iconfont icon-zan1'" class="ii"></i>{{
                                video.zans}}
                            </div>
                        </div>
                    </div>

                </el-col>
                <h2 v-if="videoList.length===0" style="color: #999;text-align: center">还没有视频哦</h2>
            </el-row>
        </div>
</template>
<script>
    import api from '@/api'
    import {Loading} from 'element-ui'

    export default {
        data() {
            return {
                videoList: [
                    /*{
                        vid: 18,
                        name: "哈哈哈哈哈",
                        url: "//localhost:8081/videosys/public/static/video/73c73f0b5ea3142ca83d060e45ce4ebfaaff9d2e8fa007fe62fe3b4534b79dbf.mp4",
                        info: "这是视频说明",
                        time: 1525682209,
                        img: "//localhost:8081/videosys/public/static/img/73c73f0b5ea3142ca83d060e45ce4ebfaaff9d2e8fa007fe62fe3b4534b79dbf.jpg",
                        likes: 1,
                        zans: 0,
                        liked: 0,
                        zand: 0,

                    }*/
                ]

            }
        },
        methods: {
            /*获取视频列表*/
            getVideoList() {
                let loading = Loading.service({text: '正在加载视频列表'});
                api.getLikeVideoList().then(({data: resp}) => {
                    if (resp.code === 200) {
                        this.videoList = resp.data.map((item) => {
                            return {
                                vid: item.vid,  //id
                                name: item.name,    //视频名
                                url: item.url,     //视频地址
                                info: item.info,   //视频说明
                                time: 1525682209,   //上传日期
                                img: item.img,
                                likes: item.likes, //喜欢总数
                                zans: item.zans, //点赞总数
                                liked: item.liked, //是否喜欢
                                zand: item.zand, //是否点赞
                            }
                        })
                        loading.close();
                    } else {
                        this.$message({type: 'warning', message: resp.message});
                        loading.close();
                    }
                }).catch(() => {
                    this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
                        loading.close();
                    });
                })
            },
            like(video) {

                if (typeof sessionStorage.uid === 'undefined') {
                    this.$message({message: '你还没有登录哦,请登录后再操作', type: 'warning'})
                    return
                }

                if (video.liked === 0) {
                    video.liked = 1
                    video.likes++
                    /*没有喜欢过的情况*/
                    api.like({vid: video.vid}).then(({data: resp}) => {
                        if (resp.code === 200) {

                        } else {
                            this.$message({message: '喜欢失败', type: 'warning'})
                            video.liked = 0
                            video.likes--
                        }
                    }).catch(()=>{
                        this.$message({message: '网络故障', type: 'error'})
                        video.liked = 0
                        video.likes--
                    })

                } else {
                    video.liked = 0
                    video.likes--
                    api.unlike({vid: video.vid}).then(({data: resp}) => {
                        if (resp.code === 200) {

                        } else {
                            this.$message({message: '取消喜欢失败', type: 'warning'})
                            video.liked = 1
                            video.likes++
                        }
                    }).catch(()=>{
                        this.$message({message: '网络故障', type: 'error'})
                        video.liked = 0
                        video.likes--
                    })

                }

            },
            zan(video) {
                if (typeof sessionStorage.uid === 'undefined') {
                    this.$message({message: '你还没有登录哦,请登录后再操作', type: 'warning'})
                    return
                }
                if (video.zand === 0) {
                    /*没有赞过的情况*/
                    video.zand = 1
                    video.zans++

                    api.zan({vid: video.vid}).then(({data: resp}) => {
                        if (resp.code === 200) {

                        } else {
                            this.$message({message: '取消喜欢失败', type: 'warning'})
                            video.zand = 0
                            video.zans--
                        }
                    }).catch(()=>{
                        this.$message({message: '网络故障', type: 'error'})
                        video.zand = 0
                        video.zans--
                    })


                } else {
                    video.zand = 0
                    video.zans--

                    api.unzan({vid: video.vid}).then(({data: resp}) => {
                        if (resp.code === 200) {

                        } else {
                            this.$message({message: '取消喜欢失败', type: 'warning'})
                            video.zand = 1
                            video.zans++
                        }
                    }).catch(()=>{
                        this.$message({message: '网络故障', type: 'error'})
                        video.zand = 1
                        video.zans++
                    })
                }
            }
        },
        created: function () {
            this.getVideoList(); //获取视频列表
        }
    }
</script>
<style scoped>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .video-item {
        width: calc(100% - 6px);
        margin: 3px;
    }

    .img-cont {
        background: #2d3a40;
        text-align: center;
        height: 135px;
        overflow: hidden;
    }

    .image {
        background: black;
        width: 100%;
    }

    .title {
        margin-top: 5px;
        font-size: 18px;
        height: 20px;
        line-height: 20px;
        overflow: hidden;
    }

    .info {
        color: #777;
        font-size: 12px;
        height: 28px;
        line-height: 14px;
        overflow: hidden;
    }

    .icon {
        user-select: none;
        color: #888;
        font-size: 16px;
        line-height: 20px;
    }

    .i {
        user-select: none;
        display: inline-block;
        width: 40%;
    }

    .ii {
        user-select: none;
        font-size: 20px;

    }
</style>